<template>
	<view class="user">
		<template v-if="isLogin">
			<view class="center">
				<view class="logo">
					<image class="logo-img" :src="userInfo.userUrl"></image>
					<view class="logo-title">
						<text class="uer-name">Hi，{{userInfo.userName}}</text>
					</view>
				</view>
				<view class="center-list">
					<view class="center-list-item border-bottom" @click="goUserOrder">
						<text class="list-icon">&#xe60f;</text>
						<text class="list-text">我预约的</text>
						<text class="navigat-arrow">&#xe65e;</text>
					</view>
					<view class="center-list-item" @click="goDeposit">
						<text class="list-icon">&#xe639;</text>
						<text class="list-text">账户余额</text>
						<text class="navigat-arrow">&#xe65e;</text>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<empower @wxGetUserInfo="wxGetUserInfo"></empower>
		</template>
	</view>
</template>

<script>
	import empower from '../../components/empower.vue'
	export default {
		components: {
			empower
		},
		data() {
			return {
				isLogin: false,
				code: ''
			};
		},
		onShow() {
			if (this.token) {
				this.isLogin = true
				// this.isLogin && this.initUserInfo()
			} else {
				this.loginCode()
			}
		},
		computed: {
			token() {
				return this.$store.getters['getTokenData']
			},
			userInfo() {
				return this.$store.getters['getUserInfoData']
			}
		},
		methods: {
			goUserOrder() {
				this.$comm.navigateTo('/pages/user-order/user-order')
			},
			goDeposit() {
				this.$comm.navigateTo('/pages/deposit/deposit')
			},
			loginCode() {
				uni.showLoading();
				this.getCode().then(code => {
					this.code = code;
					uni.hideLoading();
				})
			},
			getCode() {
				const promise = new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							if (loginRes && loginRes.code) {
								resolve(loginRes.code)
							} else {
								reject(loginRes)
							}
						}
					});
				}).catch(res => {
					this.$comm.errorToShow(res.errMsg || '获取code失败')
				})
				return promise
			},
			wxGetUserInfo(res) {
				if (!this.code) {
					this.$comm.errorToShow('正在加载中，稍等一下')
					return
				}
				if (res.detail.errMsg == 'getUserInfo:fail auth deny') {
					this.$comm.errorToShow('已拒绝授权')
				} else {
					this.toWxLogin(res.detail.userInfo)
				}
			},
			toWxLogin(data) {
				data.code = this.code;
				this.$api.login(data).then(res => {
					if (res.code) {
						this.$comm.successToShow("登录成功", () => {
							this.$store.commit('setUserInfoData', res.data.userInfo)
							this.$store.commit('setTokenData', res.data.Token)
							this.isLogin = true;
						})
						// uni.reLaunch({
						// 	url: '/pages/index/index'
						// })
					} else {
						this.$comm.errorToShow('登录失败，请重试')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 300upx;
		padding: 20upx;
		padding-left: 40upx;
		box-sizing: border-box;
		background-color: #4cd964;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #ecebef;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4cd964;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
</style>
